<template>
    <!-- 标签栏 -->
    <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
        <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check="true"
            finished-text="没有更多了"
            @load="load"
        >
            <!-- 商品卡片 -->
            <van-card
                v-for="(item, key) in list"
                :title="item.info.products.name"
                :thumb="item.info.products.thumbs_text"
                :num="item.info.pronum"
                :tag="item.status_text"
                @click-thumb="toProductInfo(item.info.proid)"
            >
                <template #title>
                    <div class="title">订单号：{{ item.code }}</div>
                </template>

                <!-- 卡片的插槽部分 -->
                <template #desc v-if="item.info.attrs">
                    <van-tag v-for="(attr,index) in item.info.attrs" :key="index" class="tag" type="primary">{{ attr.value }}</van-tag>
                </template>

                <template #desc v-else>
                    <van-tag class="tag" type="danger">无规格数据</van-tag>
                </template>

                <template #tags>
                    <div class="price">下单时间：{{ item.createtime_text }}</div>
                </template>

                <template #price>
                    <div class="price">订单总价：￥{{ item.amount }}</div>
                </template>

                <template #footer>
                    <!-- status = 1 仅退款 -->
                    <van-button type="danger" size="small" v-if="item.status=='1'" @click="OrderApply(item.id)">申请退款</van-button>

                    <!-- status = -1 商家审核退货退款 -->
                    <van-button type="danger" size="small" v-if="item.status=='-1'">已提交申请，等待商家审核...</van-button>

                    <!-- status = 2 已发货 -->
                    <van-button type="success" size="small" v-if="item.status=='2'"@click="OrderConfirm(item.id)">确认收货</van-button>
                    <van-button type="warning" size="small" v-if="item.status=='2'">物流详情</van-button>
                    <van-button type="danger" size="small" v-if="item.status=='2'" @click="OrderApply(item.id)">申请退货退款</van-button>

                    <!-- status = -2 商家审核退货退款 -->
                    <van-button type="danger" size="small" v-if="item.status=='-2'">已提交申请，等待商家审核...</van-button>

                    <!-- status = -3 填写退货信息 -->
                    <van-button type="success" size="small" v-if="item.status=='-3'" @click="ToBackAdd(item.id)">填写退货信息</van-button>

                    <!-- status = 3 已收货 -->
                    <van-button type="warning" size="small" v-if="item.status=='3'">立即评价</van-button>

                    <van-button type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>

                </template>
            </van-card>
        </van-list>
    </van-pull-refresh>

    <!-- 退款的弹框 -->
    <van-popup v-model:show="ApplyShow" position="bottom">
        <van-form @submit="OrderApplyConfirm">
            <!-- 退款申请 -->
            <van-field
                v-model="remark"
                name="remark"
                rows="5"
                autosize
                type="textarea"
                maxlength="120"
                placeholder="请输入申请原因"
                show-word-limit
                :rules="[{required:true,message:'请填写申请原因'}]"
            />
            <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
        </van-form>
    </van-popup>
</template>

<script setup>
    const {proxy} = getCurrentInstance()

    // 标签栏数据
    let StatusActive = ref('')
    let StatusList = ref([
        { title: '全部', value: '' },
        { title: '已支付', value: '1' },
        { title: '已发货', value: '2' },
        { title: '已收货', value: '3' },
        { title: '已完成', value: '4' },
        { title: '退货退款', value: '-1' },
    ])

    // 下拉刷新
    let list =ref([]) //数据列表
    let page =ref(1) //分页
    let loading =ref(false) //加载状态
    let finished =ref(false) //是否无更多数据
    let refreshing =ref(false) //下拉刷新

    // 申请仅退款
    let orderid = ref(0)
    let ApplyShow = ref(false)
    let remark = ref('')



    // 标签栏切换
    const TabChange = async ({name}) =>{
        refresh()
    }

    // 下拉刷新
    const refresh = async () =>{
        //可以去掉定时器
        setTimeout(() => {
            //清空查询参数
            page.value = 1
            list.value = []
            finished.value = false
            loading.value = true

            //加载数据方法
            load()
        }, 500)
    }

    //加载数据方法 查询订单数据
    const load = async () =>{
        // 判断是否为加载中的状态
        if(refreshing.value){
            refreshing.value = false
        }

        // 组装数据
        var params = {
            busid: proxy.$business.value.id,
            status: StatusActive.value,
            page: page.value
        }

        // 发送请求
        var result = await proxy.$POST({
            url:'/order/index',
            params
        })

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false

        // 如果没有更多数据了 就说明已经加载到底了
        if(result.code == 0){
            finished.value = true
            return;
        }

        // 数据修改
        result.data.map(item => {
            if (item.info) {
                item.info.attrs = JSON.parse(item.info.attrs)
            }
        })

        list.value = list.value.concat(result.data)
        page.value++
    }

    // 跳转订单详情
    const OrderInfo = (orderid) => proxy.$router.push({ path: '/order/info', query: { orderid: orderid } })

    // 申请退款 /申请退货退款
    const OrderApply = (id) =>{
        orderid.value = id
        ApplyShow.value = true
    }

    // 申请退款 申请退货
    const OrderApplyConfirm = async (values) =>{
        // 关闭弹窗
        ApplyShow.value = false

        // 发送请求
        var result = await proxy.$POST({
            url: '/order/apply',
            params:{
                orderid: orderid.value,
                busid: proxy.$business.value.id,
                remark:remark.value
            }
        })

        if (result.code == 0) {
            proxy.$fail(result.msg)
            return false
        }

        proxy.$success({
            message: result.msg,
            duration: 3000,
            onClose:() => refresh()
        })
    }

    // 填写退货单
    const ToBackAdd = (id) => proxy.$router.push({ path: '/back/add', query: { orderid: id } })

    // 确认收货
    const OrderConfirm = async (id) =>{
        proxy.$confirm({
            title: '收货提醒',
            message: '是否确认收货',
        }).then(async () => {
            var result = await proxy.$POST({
                url: '/order/confirm',
                params: {
                    orderid: id,
                    busid:proxy.$business.value.id
                }
            })

            if (result.code == 0) {
                proxy.$fail(result.msg)
                return false
            } else {
                proxy.$success({
                    message: result.msg,
                    onClose: () => refresh()
                })
                return false
            }
        }).catch(() => {})
    }


</script>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }
</style>
